<template>
  <div class="app-container">
    <el-dialog title="导入订单" :visible.sync="dialogVisible" width="500px" :before-close="handleClose" class="add-order-dialog">
      <el-form ref="form" :model="dialogForm" label-width="80px">
        <el-link type="primary" :underline="false" href='./public/statics/导入模板.xlsx' style="margin-bottom:15px;margin-left:12px">点击下载导入模板</el-link>
        <el-form-item label="订单文件">
          <el-upload v-if="orders.length === 0" :on-change='onPicChange' :file-list="picList" action="#" :show-file-list='false' :auto-upload="false">
            <el-button :loading='reading' size="small" type="primary">点击上传</el-button>
          </el-upload>
          <span v-else>共{{ orders.length }}条数据</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button :disabled='orders.length === 0' type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as XLSX from 'xlsx'
import { addOrder, importOrder } from '@/api/order'
export default {
  components: {
  },
  props: {
    show: { type: Boolean, default: false }
  },
  watch: {
    show(val) {
        this.dialogVisible = val
    }
  },
  data() {
    return {
      reading: false,
      orders: [],
      dialogVisible: false,
      picList: [],
      dialogForm: {},
    }
  },
  mounted() {
  },
  methods: {
    async confirm() {
      const res = await importOrder({orders: this.orders})
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '导入成功'
        })
        this.$emit('refresh')
        this.handleClose()
      }
    },

    async onPicChange(file, list) {
      const isXlsx = file.raw.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      const isSmall = file.size < 1024 * 1024 * 5
      if (!isXlsx) { this.$message({ type: 'error', message: '仅支持xlsx格式文件' }) }
      if (!isSmall) { this.$message({ type: 'error', message: '文件大小不能超过5M' }) }
      if (isXlsx && isSmall) {
        this.reading = true
      } else {
        return false
      }
      var reader = new FileReader();
      reader.onload = (e) => {
        var data = e.target.result;
        const workbook = XLSX.read(data, {type: 'binary'})
        const sheetName = workbook.SheetNames[0];
        const sheet = workbook.Sheets[sheetName];
        const jsonData = XLSX.utils.sheet_to_json(sheet);
        this.orders = jsonData.map((item, index) => {
          const now = new Date()
          const dateStr = (now.getFullYear() + '').slice(2) + (now.getTime() + index + '').slice(2)
          const random = parseInt(Math.random() * 80) + 10
          return {
            orderNum: dateStr + random,
            picList: [],
            designList: [],
            orderType: item.类型 || '',
            customer: item.用户名 || '',
            orderSize: item.尺码 || '',
            wantPic: item.图案 || '',
            remark: item.备注 || ''
          }
        })
        this.reading = false
      };
      reader.readAsBinaryString(file.raw);
    },
    handleClose() {
      this.dialogVisible = false
      this.picList = []
      this.orders = []
      this.$emit('update:show', false)
    },
  }
}
</script>
<style lang="scss">
</style>

